<template>
  <div id="projectHome">
    <div class="titleTop">
      <div class="titleLeft">
        <i class="iconfont icontongyong_dangqianweizhi"></i>
        <span>项目</span>
        <i class="el-icon-arrow-right"></i>
        <span class="active">{{$route.meta.title}}</span>
      </div>
    </div>
    <div class="progress">
      <div class="stepBox">
        <el-steps :active="active" finish-status="success" align-center>
          <el-step title="项目信息录入"></el-step>
          <el-step title="项目审批"></el-step>
          <el-step title="项目执行"></el-step>
          <el-step title="项目关闭"></el-step>
        </el-steps>
      </div>
      <div class="nav">
        <span
          v-for="(item, index) in navArr"
          :key="index"
          :class="[linkIndex== index? 'activess': '']"
          @click="changeindex(index)"
        >{{item.name}}</span>
        <!-- <router-link tag="span" :to="{name: 'sendMessage'}">发行信息</router-link>
        <router-link tag="span" :to="{name: 'projectCustom'}">项目客户</router-link>
        <router-link tag="span" :to="{name: 'contractsList'}">项目合同</router-link>
        <router-link tag="span" :to="{name: 'accountsReceivable'}">应收账款</router-link>
        <router-link tag="span" :to="{name: 'centerQuery'}">中登查询</router-link>
        <router-link tag="span" :to="{name: 'assetMange'}">资产管理</router-link>-->
      </div>
    </div>
    <router-view ></router-view>
  </div>
</template>

<script>
export default {
  name: "projectHome",
  data() {
    return {
      active: 1,
      linkIndex: 0,
      navArr: [
        { name: "项目信息", link: "projectMessage" },
        { name: "发行信息", link: "sendMessage" },
        { name: "项目客户", link: "projectCustom" },
        { name: "项目合同", link: "contractsList" },
        { name: "应收账款", link: "accountsReceivable" },
        // { name: "中登查询", link: "centerQuery" },
        { name: "资产管理", link: "assetMange" },
        { name: "投放管理", link: "putPlan" },
      ]
    };
  },
  created() {
    if (this.$route.meta.title == "项目信息") {
      sessionStorage.removeItem('linkIndex');
    } else {
      this.linkIndex = sessionStorage.getItem("linkIndex") - 0;
    }
  },
  methods: {
    changeindex(index) {
      this.linkIndex = index;
      sessionStorage.setItem("linkIndex", index);
      this.$router.push({name: this.navArr[index].link, query: {pId: this.$route.query.pId}});
    }
  }
};
</script>

<style lang="scss">
#projectHome {
  .progress {
    margin-top: 10px;
    height: 260px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 2px 0px rgba(122, 121, 121, 0.5);
    border-radius: 6px;
    .stepBox {
      width: 640px;
      margin: 0 auto;
      padding-top: 36px;
    }
    .nav {
      margin-top: 90px;
      padding: 0 5%;
      display: flex;
      justify-content: space-between;
      > span {
        width: 109px;
        height: 39px;
        background: rgba(185, 185, 185, 1);
        box-shadow: 0px 0px 4px 0px rgba(100, 100, 100, 0.5);
        border-radius: 10px;
        color: white;
        font-size: 18px;
        text-align: center;
        line-height: 39px;
        cursor: pointer;
        &.activess {
          background: rgba(30, 124, 240, 1);
          box-shadow: 0px 0px 4px 0px rgba(100, 100, 100, 0.5);
        }
        // &.router-link-exact-active {
        //   background: rgba(30, 124, 240, 1);
        //   box-shadow: 0px 0px 4px 0px rgba(100, 100, 100, 0.5);
        // }
      }
    }
  }
}
</style>
